<!--  -->
<template>
  <div class="goods container">
    <div><List :list="goodsList"></List></div>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import List from "../components/home/List";

export default {
  name: "Goods",
  components: {
    List,
  },
  data() {
    return {
      catId: "",
      id: "",
      goodsList: [],
    };
  },
  computed: {
    ...mapGetters(["getCategoryGoodsInfo", "getCategoryFoodsInfo"]),
  },
  watch: {
    // 监听到路由地址的改变
    $route: {
      immediate: true,
      handler() {
        if (this.$route.query) {
          // this.getGoodsList(this.$route.query.id);
          this.id = this.$route.query.id;
          this.getGoodsList();
        }
      },
    },
  },
  methods: {
    // 查询所有商品
    async getGoodsList() {
      this.goodsList = [];
      // console.log("ss",id)
      // const { data: res } = await this.$http.get(
      //   `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.id}&page=${this.pageIndex}&limit=${this.pageSize}`
      // );
      const { data: res } = await this.$http.get(
        `/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.id}&limit=200`
      );
      console.log("ssss", res);
      res.page.list.forEach((item) => {
        if (item.publishStatus) {
          var data = {};
          data.id = item.id;
          data.saleCount = 0;
          item.skus.forEach((item1) => {
            data.saleCount += item1.saleCount;
          });
          data.imgSrc = item.images[0];
          data.proName = item.proName;
          data.price = item.price;
          this.goodsList.push(data);
        }
      });
      // console.log(this.goodsList);
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total.less";
/* 为了不造成样式污染，单据加一个style标签来修改第三方组件样式，pagination表格分页整体居中，上边距20px */
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
</style>
